<template>
	<view class="Allbody">
		<!-- 顶部导航 -->
		<view class="top">
			<view class="top-2">Sip Site 幸福</view>
			<view class="top-3">
				<swiper class="swiper" circular vertical :autoplay="true">
					<swiper-item>
						<view class="swiper-item">
							<span class="ji">集</span> 集满十点，可兑换好礼
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<span><uni-icons type="sound" size="18"></uni-icons></span>
							会员专享活动~ 周二积分翻倍！ 生日有礼！
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 菜单 -->
		<view class="main">
			<view class="container">
				<!-- 菜单索引栏 -->
				<scroll-view class="index-bar" scroll-y="true">
					<view v-for="(item, index) in productsPageData" :key="index" class="index-item"
						:class="{ active: activeIndex === index }" @click="scrollToCategory(index)">
						<view><img :src="item.url" alt="" /></view>
						<view>{{ item.name }}</view>
					</view>
				</scroll-view>

				<!-- 菜单内容 -->
				<scroll-view class="menu-content" scroll-y="true" scroll-with-animation @scroll="onScroll"
					:scroll-into-view="scrollTarget">
					<view class="app category" v-for="(item,index) in productsPageData" :key="index"
						:id="'category-' + index" @click="producToggle('bottom')">
						<view class="biaoti">
							<text>{{item.name}}</text>
						</view>
						<view class="a" v-for="shop in item.items" @click="detail(shop.spuId)">
							<view class="b">
								<image :src="shop.pic" mode="scaleToFill"></image>
							</view>
							<view class="c">
								<view class="d">
									<text class="c1">{{shop.name}}</text>
									<view class="c2" v-for="ags in shop.tags">
										<view class="c2a" v-if="ags.type===2">
											<image :src="ags.tags[0].icon" mode="scaleToFill"></image>
											<text>{{ags.tags[0].title}}</text>
										</view>
									</view>
									<view class="c3" v-if="filteredTags(shop.tags).length">
										<view class="c4" v-for="tag in filteredTags(shop.tags)" :key="tag.title">
											<view class="c4a" :style="{ backgroundColor: tag.background }">
												<text>{{ tag.title }}</text>
											</view>
										</view>
									</view>
								</view>
								<view class="c5">
									<text>{{shop.desc}}</text>
								</view>
								<view class="c6">
									<view class="c6a">
										<text class="c6a1">￥<text class="c6a2">{{shop.currentPrice}}</text><text
												class="c6a3">/{{shop.unit}}起</text></text>
									</view>
									<view class="c6b">
										<view class="c6ba">
											<uni-icons type="plusempty" color="black" size="18"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 购物车 -->
		<view class="aba">
			<view class="abb" @click="toggle('bottom')">
				<view class="abc">
					<text class="abc1">优惠助手</text>
				</view>
				<view class="abd">
					<img src="../../static/left/9.jpg" alt="" />
					<text>未选购商品</text>
				</view>
				<view class="abe" @click.stop7[]="toggle('left')">
					<text>去结算</text>
				</view>
			</view>
		</view>

		<view>
			<!-- 产品详情弹窗 -->
			<uni-popup ref="productPopup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="">
						<img :src="currentProduct.pic" alt="" />
					</view>
					<view class="">
						<view class="name">
							{{currentProduct.name}}
						</view>
						<view class="desc">
							{{currentProduct.desc}}
						</view>
					</view>
					<view class="">
						<view class="">
							{{currentProduct.currentPrice}} / {{currentProduct.unit}}
						</view>
						<uni-number-box v-model="vModelValue" @blur="blur" @focus="focus" @change="changeValue" />
						<view class="" @click="addToCar">
							加入购物车
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 购物车弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
						class="text">popup 内容</text></view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import MenuShop from "@/components/MenuShop.vue";

	export default {
		data() {
			return {
				productsPageData: null,
				activeIndex: 0,
				scrollTarget: "", // 目标滚动 ID
				categoryPositions: [], // 分类位置
				currentProduct: [],
				vModelValue: 1,
				// 购物车数据
				carList: JSON.parse(localStorage.getItem("carList")) || [],
				userinfo: JSON.parse(localStorage.getItem("userinfo")) || []
			};
		},
		components: {
			MenuShop
		},
		computed: {
			filteredTags() {
				return (tags) => tags.filter(tag => tag.type === 4).flatMap(tag => tag.tags);
			}
		},
		methods: {
			// 获取产品页面数据
			getProductsPageData() {
				uni.request({
					url: '/sipsite/shop.json', // 示例接口地址
					success: (res) => {
						this.productsPageData = res.data.data.categories;
						this.$nextTick(() => {
							// 计算每个分类的位置
							uni.createSelectorQuery().selectAll('.category')
								.boundingClientRect((rects) => {
									this.categoryPositions = rects.map(rect => rect.top);
									// console.log(this.categoryPositions);
								}).exec();
						});
					}
				});
			},

			// 滚动到指定分类
			scrollToCategory(index) {
				this.activeIndex = index;
				this.scrollTarget = `category-${index}`; // 通过 ID 滚动到对应位置
				// console.log(index,this.activeIndex);
			},



			// 监听滚动事件
			onScroll(event) {
				const scrollTop = event.detail.scrollTop;
				let index = 0;
				// console.log(event);
				// 通过滚动位置确定当前激活的索引
				for (let i = 0; i < this.categoryPositions.length; i++) {
					if (scrollTop >= this.categoryPositions[i]) {
						let n = i + 1
						this.activeIndex = n;
						// console.log(this.activeIndex);
					}
				}
			},


			// 购物车弹出框
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},

			// 产品详情弹出层
			producToggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.productPopup.open(type)
			},

			//产品详情
			detail(id) {
				let shoplist = []
				shoplist = this.productsPageData.reduce((acc, item) => {
					return acc.concat(Object.values(item.items));
				}, []);
				this.currentProduct = shoplist.find(item => item.spuId == id)
				console.log(this.currentProduct);
			},

			blur(e) {
				console.log('blur:', e);
			},
			focus(e) {
				console.log('focus:', e);
			},
			changeValue(value) {
				console.log('返回数值：', value);
			},
			addToCar() {
				let include = this.carList.find(item => item.product.spuId == this.currentProduct.spuId)
				if (include) {
					console.log('11111', include);
					let newCarList = this.carList.map(item => {
						if (item.product.supId == this.currentProduct.supId) {
							return {
								...item,
								count: item.count + this.vModelValue
							}
						}
						return item
					})
					localStorage.setItem("carList", JSON.stringify(newCarList))
				} else {
					localStorage.setItem("carList", JSON.stringify([...this.carList, {
						userId: this.userinfo.phone,
						product: this.currentProduct,
						count: this.vModelValue
					}]))
					console.log("2222");
				}
				this.carList = JSON.parse(localStorage.getItem("carList"))
				this.$refs.productPopup.close()
				this.vModelValue = 1
			}
		},

		created() {
			this.getProductsPageData();
		}
	};
</script>

<style scoped lang="less">
	.aba {
		width: 100%;
		height: 200rpx;
		position: fixed;
		left: 0;
		bottom: 80rpx;
		// z-index: 99999;

		.abb {
			width: 92%;
			height: 80rpx;
			border-radius: 50rpx;
			background-color: white;
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;

			.abc {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-left: 30rpx;

				.abc1 {
					font-size: 25rpx;
				}

				.abc2 {
					font-size: 20rpx;
				}
			}

			.abd {
				display: flex;
				align-items: center;
				padding-left: 73rpx;

				img {
					width: 60rpx;
					hieht: 60rpx;
				}

				text {
					font-size: 20rpx;
					padding-left: 13rpx;
					color: #666;
				}
			}

			.abe {
				width: 28%;
				height: 100%;
				background-color: #f9dd2e;
				line-height: 80rpx;
				text-align: center;
				margin-left: 120rpx;
				border-radius: 0 50rpx 50rpx 0;

				text {
					font-weight: 700;
					font-size: 25rpx;
				}
			}
		}
	}

	.Allbody {
		height: 88vh;
		background-color: #fff;
		position: relative;

		.top {
			padding: 20rpx;

			.top-2 {
				font-size: 40rpx;
				font-weight: bold;
			}

			.top-3 {
				padding: 10rpx 0;
				height: 50rpx;
				overflow: hidden;

				.ji {
					font-size: 15px;
					padding: 0rpx 6rpx;
					border: 2px solid #ab6240;
					color: #ab6240;
					border-radius: 8rpx;
				}
			}
		}

		.main {
			height: 90%;
			display: flex;
			overflow: hidden;

			.container {
				display: flex;
				width: 100%;
				height: 100%;
			}

			// 索引栏
			.index-bar {
				width: 160rpx;
				border-right: 1px solid #ddd;
				overflow-y: auto;

				::-webkit-scrollbar {
					display: none;
				}

				.index-item {
					padding: 12px;
					text-align: center;
					font-size: 13px;
					color: #666;
					cursor: pointer;
					transition: all 0.3s;

					img {
						width: 40rpx;
					}

					&.active {
						color: black;
						font-weight: bold;
						border-radius: 8px;
					}
				}
			}

			// 菜单内容
			.menu-content {
				flex: 1;
				padding: 10px;
				overflow-y: auto;

				::-webkit-scrollbar {
					display: none;
				}
			}

			.category-header {
				font-size: 14px;
				background-color: #f9f9f9;
				border-radius: 5px;
				margin: 8px 0;
			}

			.menu-item {
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				border-bottom: 1px solid #eee;
			}

			.item-name {
				font-size: 14px;
			}

			.item-price {
				font-size: 14px;
				color: #888;
			}
		}
	}

	.app {
		width: 100%;
		display: flex;
		flex-direction: column;

		.a {
			width: 100%;
			height: 200rpx;
			display: flex;
			margin: 20rpx 0;
			font-size: 25rpx;

			.b {
				image {
					width: 170rpx;
					height: 170rpx;
					border-radius: 20rpx;
					margin-top: 10rpx;
				}

			}

			.c {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 100%;
				height: 100%;
				padding-left: 15rpx;

				.d {
					.c2 {
						margin: 10rpx 0;

						.c2a {
							width: 90rpx;
							height: 20rpx;
							background-color: rgba(255, 102, 51, 0.08);
							display: flex;
							align-items: center;

							image {
								width: 15rpx;
								height: 15rpx;
							}

							text {
								font-size: 15rpx;
								padding-left: 10rpx;
							}
						}

					}

					.c3 {
						display: flex;
						flex-wrap: wrap;
						margin: 5rpx 0;

						.c4 {
							margin-right: 20rpx;
							font-size: 16rpx;

							.c4a {
								padding: 5rpx;
							}
						}
					}
				}

				.c5 {
					text {
						display: inline-block;
						width: 330rpx;
						font-size: 20rpx;
						color: #999;
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 使用省略号表示溢出文本 */
					}
				}

				.c6 {
					display: flex;
					justify-content: space-between;

					.c6a {
						.c6a1 {
							font-size: 25rpx;
						}

						.c6a2 {
							font-size: 30rpx;
						}

						.c6a3 {
							font-size: 22rpx;
							color: #999;
						}
					}

					.c6b {
						.c6ba {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							background-color: #f9dd2e;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}
			}

		}
	}

	.buy-car {
		position: absolute;
		bottom: 3vh;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		text-align: center;

		.carImage {
			width: 120rpx;
			heigth: 120rpx;
		}

		.price {
			width: 60%;
			// background-color: #f9dd2e;
		}

		.go-buy {
			width: 20%;
			border-radius: 0 40rpx 40rpx 0;
			background-color: #f9dd2e;
			padding: 20rpx 0;
		}
	}


	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding-top: 0px;
		padding-bottom: 88px;
		background-color: #fff;
		height: 74vh;

		img {
			width: 100%;
		}
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>